<template>
  <div class="guide">
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(l, i) in imgs" :key="i">
        <img :src="l" alt="" />
      </van-swipe-item>
    </van-swipe> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(l, i) in banners" :key="i">
        <img :src="l.pic" alt="" />
        <van-button type="danger" @click="gohome" v-if="i == banners.length - 1"
          >前往主页</van-button
        >
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getWeekInYear } from "@/utils"; //大括号必不可少
export default {
  data() {
    return {
      imgs: [
        require("@/assets/images/img1.jpg"),
        require("@/assets/images/img2.jpg"),
        require("@/assets/images/img3.jpg"),
        require("@/assets/images/img4.jpg"),
      ],
      banners: [],
    };
  },
  methods: {
    async getBanners() {
      let res = await this.$axios.get(
        "http://121.196.235.163:3000/banner?type=1"
      );
      let a = res.data.banners.slice(0, 4);
      console.log(a);
      this.banners = a;
    },
    gohome() {
      this.$router.push({ name: "main" });
    },
  },
  created() {
    this.getBanners();
    console.log(getWeekInYear());
  },
  beforeRouteEnter(to, from, next) {  //需求：一周只看一次guide页面
    const week = getWeekInYear();
    if (!localStorage.getItem("weekNow")) {   //获取不到，没进入过，进入并设周数
      next();
      localStorage.setItem("weekNow", week);
    } else {
      if (localStorage.getItem("weekNow") == week) { 
        next({ name: "main" });     //获取得到，并等于上次获取，说明是在同一周跳进第二次，直接去主页
      } else {
        next();      //获取得到，并不等于上次获取，说明是在不同周进入的第一次，进入并更新周数
        localStorage.setItem("weekNow", week);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.guide {
  width: 100%;
  height: 100%;
  .my-swipe {
    width: 100%;
    height: 100%;
    .van-swipe-item {
      width: 100%;
      height: 100%;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .van-button {
      left: 50%;
      transform: translateX(-50%);
      bottom: 90px;
      width: 170px;
      border-radius: 10px;
      position: absolute;
    }
  }
}
</style>
